<template>
	<view>
		<u-cell-group v-for="(item, index) in list" :key="index">
			<u-cell size="large">
				<view slot="title">
					<text style="display: inline-block;">{{ item.nickname }}</text>
					<view class="managetag" v-if="item.role == 'OWNER'">创建者</view>
					<view class="managetag" v-if="item.role == 'MANAGER'">管理员</view>
				</view>

				<view slot="value">
					<text style="color: #3598e4; margin-right: 30rpx;" @click="manageHandel(item)"
						v-if="item.role == 'MEMBER'">设为管理员</text>
					<text style="color: #3598e4; margin-right: 30rpx;" @click="outHandel(item)"
						v-if="item.role != 'OWNER'">踢出团队</text>
				</view>
			</u-cell>

		</u-cell-group>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { teamUsers, outTeam, steManager } from '@/api/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			list: [],
		};
	},
	computed: {
		...mapState(['currentTeamId',])
	},
	onShow() {
		this.getTeamUser()
	},
	methods: {
		getTeamUser() {
			teamUsers(this.currentTeamId).then(res => {
				this.list = res.data
			})
		},
		// 设为团队管理员
		manageHandel(item) {
			steManager({ teamId: this.currentTeamId, userId: item.userId }).then(res => {
				if (res.code === 200) {
					this.getTeamUser()
					this.$refs.uToast.show({
						type: 'success',
						message: res.msg,
					})
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
		// 踢出用户
		outHandel(item) {
			outTeam({ teamId: this.currentTeamId, userId: item.userId }).then(res => {
				if (res.code === 200) {
					this.getTeamUser()
					this.$refs.uToast.show({
						type: 'success',
						message: res.msg,
					})
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
	},
}
</script>

<style lang="less">
.managetag {
	display: inline-block;
	width: 80rpx;
	height: 30rpx;
	border-radius: 5rpx;
	line-height: 30rpx;
	text-align: center;
	border: 1rpx solid #ff9d4d;
	color: #ff9d4d;
	margin: 0 20rpx;
	font-size: 12px;
}
</style>
